<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>发送短信</button>
  <script>
    // bind()（重要）：使用 bind 方法不会调用函数，但是能改变函数内部 this 指向
    // 语法：fun.bind(thisArg, arg1, arg2, ...)
    // thisArg:在 fun 函数运行时指定的 this 值
    // arg1，arg2：传递的其他参数
    // 返回由指定的 this 值和初始化参数改造的 原函数拷贝（新函数）
    // 因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的 this 指向

    const obj = {
      uname: 'cxk',
      age: 18
    }
    function fn() {
      console.log(this)  // window
      // console.log(x + y)  // 3
    }
    // 1.bind 不会调用函数
    // 2.能改变this指向
    // 3.返回值是个函数，但是这个函数里面的this是更改过的
    const fun = fn.bind(obj)
    // console.log(fun)
    fun()


    // 需求：有一个按钮，点击里面就禁用，2秒钟之后开启

    // const btn = document.querySelector('button')
    // btn.addEventListener('click', function () {
    //   // 禁用按钮吗？ true 是的，禁用
    //   this.disabled = true
    //   window.setTimeout(function () {
    //     this.disabled = false
    //   }.bind(btn), 2000)
    //   // setTimeout(() => this.disabled = false, 2000)  // 箭头函数写法
    // })

    // 或者
    document.querySelector('button').addEventListener('click', function () {
      // 禁用按钮吗？ true 是的，禁用
      this.disabled = true
      window.setTimeout(function () {
        this.disabled = false
      }.bind(this), 2000)
    })
  </script>
</body>

</html>